<template>
  <div>
    <!-- eslint-disable-next-line vue/require-v-for-key -->
    <div
      v-for="(item, index) in uploadImage"
      :class="isCut ? 'demo-upload-list cut_div' : 'demo-upload-list'"
      :style="{ width: `${imgWidth}px`, height: `${imgHeight}px` }"
    >
      <img
        style="width: 100%;height: 100%"
        :class="isCut ? 'cut_img' : ''"
        :src="item"
      >
      <div class="demo-upload-list-cover">
        <Icon
          type="ios-eye-outline"
          @click.native="handleView(item)"
        />
        <Icon
          type="ios-trash-outline"
          @click.native="handleRemove(index, item)"
        />
      </div>
    </div>
    <Upload
      v-if="uploadImage.length < maxLength"
      ref="uploadLogRef"
      :headers="headers"
      multiple
      :show-upload-list="false"
      :format="format"
      :max-size="maxSize"
      :on-success="handleUploadSuccess"
      :on-exceeded-size="handleMaxSize"
      :on-format-error="handleFormatError"
      type="drag"
      :style="{ display: 'inline-block', width: `${imgWidth - 2}px` }"
      :action="uploadUrl"
    >
      <div :style="{ width: `${imgWidth - 2}px`, height: `${imgHeight - 2}px`, lineHeight: `${imgHeight - 2}px` }">
        <Icon
          type="ios-camera"
          :size="iconSize"
        />
      </div>
    </Upload>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getStore } from '../../libs/storage'

export default {
  name: 'ImageUpload',
  props: {
    defaultList: {
      default: () => {
        return []
      }
    },
    oneList: {
      default: () => {
        return ''
      }
    },
    maxLength: {
      default: 1
    },
    // eslint-disable-next-line vue/require-prop-type-constructor
    type: '',
    maxSize: {
      default: 5120,
      type: Number
    },
    format: {
      default: () => {
        return ['jpg', 'jpeg', 'png']
      },
      type: Array
    },
    imgWidth: {
      default: 60
    },
    imgHeight: {
      default: 60
    },
    iconSize: {
      default: 20
    },
    isCut: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      uploadImage: [],
      uploadUrl: `${process.env.VUE_APP_BASE_URL}/sports/manager/upload/image?type=`,
      headers: {}
    }
  },
  watch: {
    defaultList () {
      if (this.defaultList) { this.init() }
    },
    oneList () {
      if (this.oneList) { this.init() }
    }
  },
  mounted () {
    if (this.oneList) { this.uploadImage.push(this.oneList) }

    this.uploadUrl += this.type
    const accessToken = getStore('accessToken')
    const tenantId = getStore('x-tenant-header')
    const userId = getStore('userId')
    const accountId = getStore('accountId')
    this.headers = {
      'x-token-header': accessToken,
      'x-tenant-header': tenantId,
      'x-user-header': userId,
      'x-client-header': 'admin',
      'x-account-header': accountId
    }
  },
  methods: {
    updateImages (images) {
      this.uploadImage = images
    },
    getFileList () {
      return this.uploadImage
    },
    init () {
      if (this.defaultList.length === 0 && this.oneList) { this.uploadImage.push(this.oneList) } else { this.uploadImage = this.defaultList }
    },
    clear () {
      this.uploadImage = []
    },
    handleView (url) {
      const image = new Image()
      image.src = url
      const viewer = new Viewer(image, {
        zIndex: 99999999,
        hidden () {
          viewer.destroy()
        }
      })
      viewer.show()
    },
    handleUploadSuccess (res) {
      if (res.success) { this.uploadImage.push(res.data) } else { this.$Message.error('图片上传失败') }
    },
    handleRemove (index, item) {
      // deleteImage({url: item}).then(res => {
      //     if (res.success) {
      this.uploadImage.splice(index, 1)
      this.$Message.success('移除成功')
      // }
      // })
    },
    handleMaxSize (file) {
      this.$Message.error({
        content: `【${file.name}】图片超过【${this.maxSize}KB】大小，上传失败`,
        duration: 3
      })
    },
    handleFormatError (file) {
      this.$Message.error({
        content: `【${file.name}】图片格式不支持，当前只支持【${this.format}】格式`,
        duration: 3
      })
    }
  }
}
</script>

<style scoped>
.demo-upload-list {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
}

.demo-upload-list:hover .demo-upload-list-cover {
    opacity: 1;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

.cat_div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
}
.cat_img {
    object-fit: cover;
}
</style>
